<template>
    <div>
        <el-dialog title="巡检项管理" :visible.sync="visible" width="30%" center @closed="dialogReset">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="巡检点ID" prop="pointId" v-show="false">
                    <el-input v-model="form.pointId" disabled></el-input>
                </el-form-item>
                <el-form-item label="巡检项ID" prop="id">
                    <el-input v-model="form.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="巡检项名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="巡检项类型" prop="itemType">
                    <el-select v-model="form.itemType" placeholder="请选择巡检项类型">
                        <el-option label="状态型" :value="1"></el-option>
                        <el-option label="数值型" :value="2"></el-option>
                        <el-option label="文本型" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="this.form.itemType === 1" label="可选值" prop="optionalValue">
                    <el-input v-model="form.optionalValue"></el-input>
                </el-form-item>
                <el-form-item v-if="this.form.itemType === 2"  label="最小值" prop="minValue">
                    <el-input v-model="form.minValue"></el-input>
                </el-form-item>
                <el-form-item v-if="this.form.itemType === 2" label="最大值" prop="maxValue">
                    <el-input v-model="form.maxValue"></el-input>
                </el-form-item>
                <el-form-item label="是否必须反馈" prop="isFeedback">
                    <el-checkbox label="是否必须反馈" name="type" v-model="form.isFeedback"></el-checkbox>
                    <el-tooltip class="item" effect="light" content="如果该巡查项设为必须反馈，则巡检执行人在手机APP端反馈巡检结果时，该巡查项不能留空。" placement="right-start">
                        <i class="el-icon-question" />
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "item-add-or-update",
        data() {
            return {
                visible: false,
                form: {
                    id: null,
                    name: '',
                    itemType: 1,
                    optionalValue: '',
                    minValue: '',
                    maxValue: '',
                    isFeedback: 0,
                    pointId: null
                }
            }
        },
        methods: {
            dialogReset() {
                this.$refs['form'].resetFields();
                this.form.id = '';
            },
            init(id, pointId) {
                this.visible = true;
                this.form.id = id || '';
                this.$nextTick(() => {
                    this.$refs['form'].resetFields();
                    this.form.id = id || '';
                    this.form.pointId = pointId;

                    // 如果是创建巡检项，那么 id 就为 null，不会进入 if 语句
                    // 如果是更新或者查看巡检项的信息，那么 id 就不为 null，会进入 if 语句
                    if (this.form.id) {
                        axios.get('http://gulimall.com/api/inspection/item/info', {params: {id: this.form.id}}).then(
                            response => {
                                let data = response.data.data;
                                this.form.id = data.id;
                                this.form.isFeedback = data.isFeedback === 1;
                                this.form.itemType = data.itemType;
                                this.form.minValue = data.minValue;
                                this.form.maxValue = data.maxValue;
                                this.form.name = data.name;
                                this.form.optionalValue = data.optionalValue;
                            },
                            error => {
                                console.log('获取巡检项属性出现错误');
                            }
                        );
                    }
                });
            },
            submitForm() {
                // 当巡检项的结果为【状态型】时，把数值型中的 minvalue 和 maxvalue 设置为 0
                // 当巡检项的结果为【数值型】时，把状态型中的 optionalValue 设置为 无
                if (this.form.itemType === 1) {
                    this.form.minValue = 0;
                    this.form.maxValue = 0;
                } else if (this.form.itemType === 2) {
                    this.form.optionalValue = '无';
                }

                let params = {
                    id: this.form.id,
                    name: this.form.name,
                    itemType: this.form.itemType,
                    optionalValue: this.form.optionalValue,
                    minValue: this.form.minValue,
                    maxValue: this.form.maxValue,
                    isFeedback: this.form.isFeedback ? 1 : 0,
                    pointId: this.form.pointId
                };

                console.log(params);
                // 如果 form.id 为 null，说明这个表单是创建一个新的巡检项对象
                // 如果 form.id 不为 null，说明这个表单是更新一个巡检项对象
                if (this.form.id === null || this.form.id.length === 0) {
                    axios.post('http://gulimall.com/api/inspection/item/create', {
                        ...params
                    }).then(
                        response => {this.showMessage('创建巡检项成功');},
                        error => {this.showMessage('创建巡检项失败');}
                    );
                } else {
                    axios.post('http://gulimall.com/api/inspection/item/update', {
                        ...params
                    }).then(
                        response => {this.showMessage('更新巡检项成功');},
                        error => {this.showMessage('更新巡检项失败');}
                    )
                }
            },
            showMessage(msg) {
                this.$message({
                    message: msg,
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false;
                        this.$emit('refreshDataList')
                    }
                });
            }
        },
        filters: {
            tranFeedback(feedback) {
                return feedback === 1;
            }
        }
    }
</script>

<style scoped>

</style>
